<template>
  <div class="page40">
    <div class="page-title">收入趋势</div>
    <el-row :gutter="10" class="page-content">

      <el-col :span="12" v-loading="chartLoading[0]">
        <div class="chart-title">主营业务收入</div>
        <div class="unit">亿元</div>
        <div class="chart-wrapper">
          <BarChart 
            :chartData="chartData1" 
            :title="['2022年累计同比', '2021年完成(亿元)', '2022年完成(亿元)']" 
            formatter="{c}%" 
          />
        </div>
      </el-col>

      <el-col :span="12" v-loading="chartLoading[1]">
        <div class="chart-title">码号收入</div>
        <div class="unit">亿元</div>
        <div class="chart-wrapper">
          <BarChart 
            :chartData="chartData2"
            :title="['2022年环比增幅(万元)', '2021年完成(亿元)', '2022年完成(亿元)']" 
            formatter="{c}"
          />
        </div>
      </el-col>

      <el-col :span="12" v-loading="chartLoading[2]">
        <div class="chart-title">产业数字化收入（考核）</div>     
        <div class="unit">亿元</div>   
        <div class="chart-wrapper">
          <BarChart 
            :chartData="chartData3" 
            :title="['累计同比增幅', '2021年完成(亿元)', '2022年完成(亿元)']" 
            formatter="{c}%"
          />
        </div>
      </el-col>

      <el-col :span="12" v-loading="chartLoading[3]">
        <div class="chart-title">台阶收入</div>
        <div class="unit">亿元</div>
        <div class="chart-wrapper">
          <BarChart 
            :chartData="chartData4" 
            :title="['2022年环比增幅(万元)', '2021年完成(亿元)', '2022年完成(亿元)']" 
            formatter="{c}"
          />
        </div>
      </el-col>

      <el-col :span="12" v-loading="chartLoading[4]">
        <div class="chart-title">天翼云收入（考核）</div>
        <div class="unit">万元</div>
        <div class="chart-wrapper">
          <BarChart 
            :chartData="chartData5" 
            :title="['累计同比增幅(%)', '2021年完成(亿元)', '2022年完成(亿元)']" 
            formatter="{c}%"
          />
        </div>
      </el-col>

      <el-col :span="12" v-loading="chartLoading[5]">
        <div class="chart-title">天翼云底座收入</div>
        <div class="unit">万元</div>
        <div class="chart-wrapper">
          <BarChart 
          :chartData="chartData6"
          :title="['累计同比增幅(%)', '2021年完成(亿元)', '2022年完成(亿元)']" 
          formatter="{c}%" 
        />
        </div>
      </el-col>

      <el-col :span="12" v-loading="chartLoading[6]">
        <div class="chart-title">政企双清单产品收入</div>
        <div class="unit">万元</div>
        <div class="chart-wrapper">
          <BarChart 
            :chartData="chartData7" 
            :title="['累计同比增幅(%)', '2021年完成(亿元)', '2022年完成(亿元)']" 
            formatter="{c}%" 
          />
        </div>
      </el-col>

      <el-col :span="12" v-loading="chartLoading[7]">
        <div class="chart-title">云省分收入</div>
        <div class="unit">万元</div>
        <div class="chart-wrapper">
          <BarChart 
            :chartData="chartData8" 
            :title="['', '云省分(账面)', '云省分(省内考核)']" 
            formatter="{c}"
          />
        </div>
      </el-col>

    </el-row>
  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
export default {
  components: {
    BarChart: () => import("./charts/page40Chart"),
  },
  props: {
    form: {
      type: Object,
      default: () => ({})
    },
  },
  data(){
    return {
      loading: false,
      indexCodeList: ["YS10000", "YS10077", "YS10096", 
                      "YS10091", "YS10139", "YS10130", 
                      "YS10133", "YS10155", "YS10151"],
      chartData1: [[], [], []],
      chartData2: [[], [], []],
      chartData3: [[], [], []],
      chartData4: [[], [], []],
      chartData5: [[], [], []],
      chartData6: [[], [], []],
      chartData7: [[], [], []],
      chartData8: [[], [], []],
      chartLoading: new Array(8).fill(false),
    }
  },
  created(){
    
  },
  methods: {
    getData(){
      this.chartLoading = new Array(8).fill(true);
      const { indexCodeList } = this;
      for(let i = 0; i < indexCodeList.length; i++){
        let form = {       
          token: this.form.token, 
          areaId: this.form.areaId, 
          acctMonth: this.form.month, 
          indexCode: indexCodeList[i] 
        };
        $budgetAPI.getCountyOperationPage40(
          form,
          res => {
            if(res.code == 0){
              const { tbTrends, lastYearTrends, thisYearTrends } = res.content;
              if(i == 7){
                this.chartData8.splice(1, 1, Object.values(thisYearTrends[0] || {}));
              } else if (i == 8){
                this.chartData8.splice(2, 1, Object.values(thisYearTrends[0] || {}));
              } else {
                this[`chartData${i+1}`] = [ 
                  Object.values(tbTrends[0] || {}),
                  Object.values(lastYearTrends[0] || {}),
                  Object.values(thisYearTrends[0] || {}),
                ]                
              }

            }
            this.chartLoading.splice(i, 1, false);
          },
          err => {
            this.chartLoading.splice(i, 1, false);
          }
        )
      }
    }    
  },

}
</script>
<style lang="scss" scoped>
.page40 {
  padding: 20px 0;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  .page-title {
    text-align: center;
    font-size: 24px;
    font-weight: 900;
  }
  .page-content {
    // display: flex;
    // flex-flow: row wrap;
    margin-top: 20px;
    > div {
      // width: 50%;
      // flex-basis: 50%;
      padding: 0 10px;
      position: relative;
      .chart-wrapper {
        border: 1px solid #dee5f3;
        border-radius: 10px;
        height: 300px;
        padding-top: 25px;
      }
      .chart-title {
        width: 290px;
        background-color: #fff;
        position: absolute;
        top: -14px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 22px;
        font-weight: 600;
        text-align: center;
      }
      .unit {
        position: absolute;
        top: 2px;
        left: 90%;
        font-size: 14px;
      }
      &:nth-child(n+3){
        margin-top: 40px;
      }
    }
  }
}
</style>